<template>
<div id="login-box">
  <div class="flex-row" style="width: 100%;height: 100%;align-items: center;" v-if="loginStatus">
    <img src="../../assets/login/icon1.png" alt="show">
    <div class="login-content">
        <div class="login-show">
                <h1 style="font-family: tangti;font-weight: 100;">智选良师</h1>
                <p style="font-family: tangti;">后台管理系统</p>
        </div>
        <div class="login-process" style="margin-top: 25px;"> 
          <div>
          <p class="subtitle">登录账号</p>
          <el-input placeholder="请输入用户名" prefix-icon="el-icon-user" v-model="username" style="margin-bottom: 15px"
            autocomplete="on"></el-input>
        </div>
        <div>
          <p class="subtitle">登录密码</p>
          <el-input placeholder="请输入密码" prefix-icon="el-icon-lock" v-model="password" style="margin-bottom: 15px"
            autocomplete="on" show-password></el-input>
        </div>
        <div>
          <p class="subtitle">身份类型</p>
          <el-select v-model="identity" placeholder="请选择" style="margin-bottom: 20px;width: 100%;">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div>
          <el-button type="primary" style="width: 100%;" @click="login">登录</el-button>
          <el-button type="text" style="margin-top: 8px;font-size: 12px;" @click="loginStatus = false">注册</el-button>

        </div>
        </div>
    </div>
  </div>
  <div class="flex-row" style="width: 100%;height: 100%;align-items: center;" v-else>
    <img src="../../assets/login/icon1.png" alt="show">
    <div class="login-content">
        <div class="login-show">
                <h1 style="font-family: tangti;font-weight: 100;">智选良师</h1>
                <p style="font-family: tangti;">后台管理系统</p>
        </div>
        <div class="login-process" style="margin-top: 25px;"> 
          <div>
          <p class="subtitle">注册账号</p>
          <el-input placeholder="请输入用户名" prefix-icon="el-icon-user" v-model="username" style="margin-bottom: 15px"
        ></el-input>
        </div>
        <div>
          <p class="subtitle">注册密码</p>
          <el-input placeholder="请输入密码" prefix-icon="el-icon-lock" v-model="password" style="margin-bottom: 15px"
         show-password></el-input>
        </div>
        <div>
          <p class="subtitle">身份类型</p>
          <el-select v-model="identity" placeholder="请选择" style="margin-bottom: 20px;width: 100%;">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div>
          <el-button type="primary" style="width: 100%;" @click="register">注册</el-button>
          <el-button type="text" style="margin-top: 8px;font-size: 12px;" @click="loginStatus = true">登录</el-button>

        </div>
        </div>
    </div>
  </div>
</div>

</template>
<script>
import { Message } from "element-ui";
import  UserService  from "../../service/UserService";
export default {
  name: "LoginView",
  data() {
    return {
      // 表示登录还是注册
      loginStatus: true,
      username:'',
      password:'',
      identity:"teacher",
      options: [{
          value: 'teacher',
          label: '教师'
        },{
          value: 'admin',
          label: '管理员'
        } ]
    };
  },

  mounted() {
  },

  methods: {
   async login() {
      const userInfo = { username: this.username, password: this.password,userType:this.identity };
      const res = await UserService.login(userInfo)
      if (res.code == 0) {
        sessionStorage.setItem("loginCookie",res.data)
        Message.success("成功登录！")
        this.getInfo();
        this.$router.push("/index")
      }
    },
    async register(){
      const userInfo = { username: this.username, password: this.password,userType:this.identity };
      const res = await UserService.register(userInfo)
      if (res.code == 0) {
        sessionStorage.setItem("loginCookie",res.data)
        Message.success("注册成功！")
        this.loginStatus = !this.loginStatus
      }
    },
    async getInfo(){
      const params = {username:this.username,userType:this.identity}
      const response = await UserService.getUserInfo(params)
      if (response.code == 0) {
        sessionStorage.setItem("userInfo",response.data)
      }
    }
  },
};
</script>

<style scoped >
@import "../../style/login.css";
.subtitle {
  color: white;
  font-size: 12px;
  margin-bottom: 12px;
}

</style>


